<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form ref="formRef" :inline="true" :model="queryData">
				<!-- <el-row>
					<el-col :span="24"> -->
				<!--						<el-form-item-->
				<!--							:label="$t('common.belong_merchant') + ':'"-->
				<!--							label-width="77px"-->
				<!--						>-->
				<!--							<merchant-select-->
				<!--								v-model="queryData.merchantId"-->
				<!--								:merchantInfo.sync="merchantObj"-->
				<!--							></merchant-select>-->
				<!--						</el-form-item>-->
				<el-form-item>
					<el-select
						v-model="tableType"
						size="medium"
						@change="tableTypeFn"
						:placeholder="$t('common.select_all')"
						:width="120"
					>
						<el-option
							v-for="item in tableTypeList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker
						v-model="searchTime"
						type="daterange"
						range-separator="-"
						:start-placeholder="$t('report.start_date')"
						:end-placeholder="$t('report.end_date')"
						:picker-options="pickerShortcutWithCurrTowPeriod"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item :label="'代理账号' + ':'" label-width="77px">
					<el-input
						v-model="queryData.proxyName"
						clearable
						:maxlength="20"
						v-input="{ name: 'includeSpaceValidate' }"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('701031')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<!-- <el-button
								type="success"
								icon="el-icon-sort"
								:disabled="loading"
								size="medium"
								@click="openColSettings"
							>
								{{ $t('common.row_set') }}
							</el-button> -->
				</el-form-item>
				<!-- </el-col>
				</el-row>
				<el-row>
					<el-col :span="24"> -->
				<el-form-item :label="$t('report.venue') + ':'">
					<el-checkbox
						v-model="selectAllVenue"
						@change="selectAllVenueMethod"
						style="margin-right: 1.2rem"
					>
						{{ $t('operation.activity_list.all_select') }}
					</el-checkbox>
					<el-checkbox-group
						v-model="queryData.venueCodes"
						style="display: inline-block;"
					>
						<el-checkbox
							v-for="(item, index) in venueNameList"
							:label="item.gameCode"
							:key="index"
							style="margin-right: 1.2rem"
						>
							{{ item.venueName }}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<!-- </el-col>
				</el-row> -->
				<date-picker-shortcuts
					kind="shortcutForButtons"
					:action="handleShortcutBtnClick"
					:loading="loading"
				/>
			</el-form>
			<el-link :underline="false" type="danger">
				{{ $t('report.refresh_warning_text') }}
			</el-link>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				v-bind="$attrs"
				v-on="$listeners"
				:cell-class-name="cellClassName"
				:header-cell-class-name="cellClassName"
				:key="headKey"
				@sort-change="changeTableSort"
				style="width: 100%"
				show-summary
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				"
				:header-cell-style="getRowClass"
				highlight-current-row
				v-if="tableTypeAjax == '1'"
			>
				<el-table-column
					v-for="(item2, index2) in newCol"
					:key="item2.label"
					align="center"
					:prop="item2.prop"
					:label="item2.label"
				>
					<template v-if="item2.children">
						<el-table-column
							v-for="(item, index) in item2.children"
							:key="'column_' + index"
							:prop="newCol[index2].children[index].prop"
							:align="item.alignCenter"
							:label="item.label"
							:min-width="item.minWidth"
							:fixed="false"
							:sortable="item.isSortColumn"
							:show-overflow-tooltip="item.isShowTip"
						>
							<!-- 通过插槽为表头绑定mousedown和dragover方法 -->
							<template
								slot="header"
								slot-scope="{ column, $index }"
							>
								<span
									@mousedown="
										handleMounseDown($event, column, $index)
									"
									@dragover="
										handleDragover($event, column, $index)
									"
								>
									{{ item.label }}
								</span>
								<el-tooltip
									class="item"
									effect="dark"
									v-if="item.itemTipContent"
									:content="item.itemTipContent"
									placement="top-start"
								>
									<i class="el-icon-question"></i>
								</el-tooltip>
							</template>
							<template slot-scope="{ row }">
								<div v-if="item.solt === 'numberSolt'">
									<span v-if="item.prop == 'memberCount'">
										<el-link
											class="lightBlueColor"
											type="primary"
											@click="showBetDetailDialog(row)"
										>
											{{
												handleNumber(
													'',
													row[
														newCol[index2].children[
															index
														].prop
													],
													0
												)
											}}
										</el-link>
									</span>
									<span v-else>
										{{
											handleNumber(
												'',
												row[
													newCol[index2].children[
														index
													].prop
												],
												0
											)
										}}
									</span>
								</div>
								<div v-if="item.solt === 'percentage'">
									<span
										:style="
											handleNumberColor(
												row[
													newCol[index2].children[
														index
													].prop
												] || 0
											)
										"
									>
										{{
											(row[
												newCol[index2].children[index]
													.prop
											] || 0) + '%'
										}}
									</span>
								</div>
								<div v-if="item.solt === 'amountSolt'">
									<p
										:style="
											item.soltColor
												? handleNumberColor(
														row[
															newCol[index2]
																.children[index]
																.prop
														]
												  )
												: ''
										"
									>
										{{
											handleTotalNumber(
												row.currency,
												row[
													newCol[index2].children[
														index
													].prop
												]
											)
										}}
									</p>
								</div>
								<div v-if="item.solt === 'defaultSolt'">
									<span v-if="item.isAddColor">
										<el-link
											class="lightBlueColor"
											type="primary"
											@click="dialogData(row)"
										>
											{{
												row[
													newCol[index2].children[
														index
													].prop
												] || '-'
											}}
										</el-link>
									</span>
									<span v-else>
										{{
											row[
												newCol[index2].children[index]
													.prop
											] || '-'
										}}
									</span>
								</div>
							</template>
						</el-table-column>
					</template>

					<!-- <div v-else>
						{{ item2 }}
					</div> -->
				</el-table-column>
			</el-table>
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				v-bind="$attrs"
				v-on="$listeners"
				:cell-class-name="cellClassName"
				:header-cell-class-name="cellClassName"
				:key="headKey"
				@sort-change="changeTableSort"
				style="width: 100%"
				show-summary
				:summary-method="
					(val) => handleRowNew(val, subSummary, totalSummary)
				"
				:header-cell-style="getRowClass"
				highlight-current-row
				v-if="tableTypeAjax == '0'"
			>
				<el-table-column
					prop="reportDate"
					label="日期"
					width="150"
					fixed
					align="center"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.reportDate || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="proxyName"
					label="代理账号"
					width="150"
					fixed
					align="center"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.proxyName || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="会员信息" width="450" align="center">
					<el-table-column
						prop="newMemberNum"
						label="新增"
						width="150"
						sortable
						align="center"
					></el-table-column>
					<el-table-column
						prop="newEffecactiveMemberNum"
						label="有效新增"
						width="150"
						sortable
						align="center"
					></el-table-column>
					<el-table-column
						prop="activeMemberNum"
						label="日活"
						width="150"
						sortable
						align="center"
					></el-table-column>
				</el-table-column>
				<el-table-column
					v-for="(parent, parentI) in newCol.filter((item) =>
						elementToCheck(item.gameCode)
					)"
					:key="parentI"
					:label="parent.gameName"
					align="center"
				>
					<el-table-column
						v-for="(item, index) in parent.list"
						:key="'column_' + index"
						:prop="parent.list[index].prop"
						:align="item.alignCenter"
						:label="item.label"
						:min-width="item.minWidth"
						:fixed="item.isFixed"
						:sortable="item.isSortColumn"
						:show-overflow-tooltip="item.isShowTip"
					>
						<!-- 通过插槽为表头绑定mousedown和dragover方法 -->
						<template slot="header" slot-scope="{ column, $index }">
							<span
								@mousedown="
									handleMounseDown($event, column, $index)
								"
								@dragover="
									handleDragover($event, column, $index)
								"
								v-if="
									item.solt == 'percentage' ||
										item.solt == 'percentageAmount'
								"
							>
								{{ item.label }}
								<el-tooltip
									class="item"
									effect="dark"
									:content="
										item.itemTipContent
											? item.itemTipContent
											: '有效盈利率=投注盈亏/有效投注*100%'
									"
									placement="top-start"
								>
									<i class="el-icon-question"></i>
								</el-tooltip>
							</span>
							<span
								@mousedown="
									handleMounseDown($event, column, $index)
								"
								@dragover="
									handleDragover($event, column, $index)
								"
								v-else
							>
								{{ item.label }}
							</span>
						</template>
						<template slot-scope="{ row }">
							<div v-if="item.solt === 'numberSolt'">
								{{
									handleNumber(
										'',
										row[parent.list[index].prop],
										0
									)
								}}
							</div>
							<div
								v-if="
									item.solt === 'amountSolt' ||
										item.solt == 'percentageAmount'
								"
							>
								<p
									:style="
										parent.list[index].soltColor
											? handleNumberColor(
													row[parent.list[index].prop]
											  )
											: ''
									"
								>
									{{
										handleTotalNumber(
											row.currency,
											row[parent.list[index].prop]
										)
									}}
								</p>
							</div>
							<div v-if="item.solt === 'percentage'">
								<p
									:style="
										parent.list[index].soltColor
											? handleNumberColor(
													row[
														parent.list[index].prop
													] || 0
											  )
											: ''
									"
								>
									{{
										(row[parent.list[index].prop] || 0) +
											'%'
									}}
								</p>
							</div>
							<div v-if="item.solt === 'defaultSolt'">
								<span v-if="item.isAddColor">
									<el-link
										class="lightBlueColor"
										type="primary"
										@click="dialogData(row)"
									>
										{{
											row[parent.list[index].prop] || '-'
										}}
									</el-link>
								</span>
								<span v-else>
									{{ row[parent.list[index].prop] || '-' }}
								</span>
							</div>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<detail-page
			v-if="showDialog"
			:rowVal="rowVal"
			:closeDialog="
				(val) => {
					showDialog = val
				}
			"
		/>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
			:before-close="cancleSetColumn"
			:close-on-click-modal="false"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(item, index) in oldCol"
				:key="index"
				class="setting-div"
			>
				<el-checkbox v-if="index !== 0" v-model="item.isShow">
					{{ item.label }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancleSetColumn()">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="subColList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<el-dialog
			:title="`${curRow.venueName}投注详情`"
			:visible.sync="betDetailDialog"
			:destroy-on-close="true"
			class="rempadding"
			width="1200px"
		>
			<el-divider></el-divider>
			<div>
				统计周期：
				<span v-if="rowVal.startDate !== rowVal.endDate">
					{{ rowVal.startDate }}～{{ rowVal.endDate }}
				</span>
				<span v-else>{{ rowVal.startDate }}</span>
			</div>
			<el-table
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="betDetaiInfolList"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				highlight-current-row
			>
				<el-table-column
					prop="proxyName"
					align="center"
					:label="'代理账号'"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="proxyLevel"
					align="center"
					:label="'代理层级'"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.proxyLevel }}
					</template>
				</el-table-column>
				<el-table-column
					prop="nickName"
					align="center"
					:label="'业务模式'"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ mappingBusinessModel(scope.row.businessModel) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="labelName"
					align="center"
					:label="'帐号状态'"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="!!scope.row.paymentLockStatus"
							class="deleteRgba"
						>
							{{ $t('common.account_lock_status') }}
							<br />
						</span>
						<span
							v-if="!!scope.row.loginLockStatus"
							class="disableRgba"
						>
							{{ $t('common.login_lock_status') }}
							<br />
						</span>
						<!-- <span
							v-if="!!scope.row.gameLockStatus"
							class="lockingRgba"
						>
							{{ $t('common.game_lock_status') }}
						</span> -->
						<span
							v-if="
								scope.row.loginLockStatus === 0 &&
									scope.row.paymentLockStatus === 0
							"
							class="normalRgba"
						>
							{{ $t('common.account_status_normal') }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="labelName"
					align="center"
					:label="'代理标签'"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.labelName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="nickName"
					align="center"
					:label="'注册时间'"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="betDetailList"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				@sort-change="changeBetDetailTableSort"
				show-summary
				:max-height="tableHeight"
				highlight-current-row
				:summary-method="
					(val) =>
						handleBetDetailRow(
							val,
							betDetailSummary,
							totalBetDetailSummary
						)
				"
			>
				<el-table-column
					prop="userName"
					align="center"
					:label="$t('common.member_number')"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="nickName"
					align="center"
					:label="$t('member.nickname')"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.nickName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="accountType"
					align="center"
					:label="$t('common.number_type')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.accountType, 'accountType') }}
					</template>
				</el-table-column>

				<el-table-column
					prop="parentProxyName"
					align="center"
					:label="$t('common.top_agent')"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="accountType"
					align="center"
					min-width="120"
					:label="$t('member.general_representative_name')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="accountStatus"
					align="center"
					:label="$t('common.account_status')"
					:min-width="getWidth(100)"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="!!scope.row.paymentLockStatus"
							class="deleteRgba"
						>
							{{ $t('common.account_lock_status') }}
							<br />
						</span>
						<span
							v-if="!!scope.row.loginLockStatus"
							class="disableRgba"
						>
							{{ $t('common.login_lock_status') }}
							<br />
						</span>
						<span
							v-if="!!scope.row.gameLockStatus"
							class="lockingRgba"
						>
							{{ $t('common.game_lock_status') }}
						</span>
						<span
							v-if="
								scope.row.loginLockStatus === 0 &&
									scope.row.gameLockStatus === 0 &&
									scope.row.paymentLockStatus === 0
							"
							class="normalRgba"
						>
							{{ $t('common.account_status_normal') }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="betCount"
					align="center"
					min-width="80"
					:label="$t('report.bet_count')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.betCount || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="validBetAmount"
					align="center"
					min-width="120"
					:label="$t('report.valid_bet_amount')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleTotalNumber(
								scope.row.currency,
								scope.row.validBetAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="betAmount"
					align="center"
					min-width="120"
					:label="$t('report.bet_amount')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleTotalNumber(
								scope.row.currency,
								scope.row.betAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="netAmount"
					align="center"
					min-width="120"
					:label="$t('report.net_amount')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.netAmount)">
							{{
								handleTotalNumber(
									scope.row.currency,
									scope.row.netAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="page"
				background
				class="fenye"
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="size"
				:page-sizes="pageSizes"
				:total="totalRecord"
				@current-change="handleCurrentChangeDialog"
				@size-change="handleSizeChangeDialog"
			></el-pagination>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { Storage } from '@/utils/compose'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
import { getColumns, getColumnsNew } from './components/columns'
import MainContent from '@/components/MainContent/index.vue'
import DatePickerShortcuts from '@/components/DatePickerShortcuts'

const start = dayjs()
	.startOf('day')
	.valueOf()
const end = dayjs()
	.endOf('day')
	.valueOf()
const setSearchTime = () => [
	dayjs()
		.startOf('day')
		.valueOf(),
	dayjs()
		.endOf('day')
		.valueOf()
]
export default {
	name: routerNames.venueProfitAndLoss,
	components: {
		DetailPage: () => import('./components/detail-page.vue'),
		MainContent,
		DatePickerShortcuts
	},
	mixins: [list, summaryList],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				venueCodes: []
			},
			selectAllVenue: true,
			searchTime: [start, end],
			tableData: [],
			subSummary: {},
			totalSummary: {},
			showDialog: false,
			betDetailDialog: false,
			rowVal: {},
			exportBtnLoading: false,
			venueNameList: [],
			merchantObj: '',
			axiosDate: '',
			loading: false,
			oldCol: [],
			dropCol: [],
			elementToCheckList: [],
			newCol: [],
			colSettings: {
				visible: false
			},
			// 拖拽状态
			dragState: {
				start: -3, // 起始元素的 index 防止初始化cellStyle时序号、展开等默认样式改变，最好小于-3
				end: -3, // 移动鼠标时所覆盖的元素 index
				dragging: false, // 是否正在拖动
				direction: undefined // 拖动方向
			},
			headKey: 'venueProfitAndLoss', // 表头数组变换位置时，重绘table（不更新该值，表头数组变化时，页面不会改变）
			scrollX: 0, // 初始x轴scroll位置（用于定位X轴滚动条）
			venueTableName: {},
			tableType: '0',
			tableTypeList: [
				{ label: '日报维度', value: '0' },
				{ label: '场馆维度', value: '1' }
			],
			tableTypeAjax: '0',
			page: 1,
			size: 100,
			totalRecord: 0,
			curRow: {},
			betDetailSummary: {},
			totalBetDetailSummary: {},
			betDetailList: [],
			betDetaiInfolList: [],
			betDetailQueryData: {}
		}
	},
	computed: {
		// venueTypeList() {
		// 	return this.globalDics.bwVenueTypeList || []
		// }
	},
	watch: {
		oldCol: {
			handler(newVal) {
				if (newVal) {
					setTimeout(() => {
						this.newCol = newVal.filter((its) => {
							return its.isShow === true
						})
					}, 1000)
				}
			},
			deep: true
		},
		'queryData.venueCodes': {
			handler(newVal) {
				if (newVal.length === this.venueNameList.length) {
					this.selectAllVenue = true
				} else {
					this.selectAllVenue = false
				}
			}
		}
	},
	created() {
		this.$store.dispatch('user/updateCurrentAccountPeriod')
		this.newCol = getColumns()
		this.getVenueName()
	},
	mounted() {},
	methods: {
		// async getVenueType() {
		// 	const { data } = await this.$api.getReportVenueTypeList()
		// 	if (data && data.length > 0) {
		// 		this.venueTypeList = data
		// 	}
		// },
		tableTypeFn() {
			delete this.queryData.orderKey
			delete this.queryData.orderType
		},
		handleShortcutBtnClick(val) {
			this.searchTime = val
			this.search()
		},
		elementToCheck(str) {
			if (this.elementToCheckList.includes(str)) {
				return true
			} else {
				return false
			}
		},
		// 鼠标摁下触发
		handleMounseDown(e, column, $index) {
			// this.dragState.dragging = true
			// this.dragState.start = parseInt($index - 0)
			// // 添加鼠标抬起事件  消除鼠标摁下立刻松开问题
			// document.addEventListener('mouseup', this.handleMouseUp)
			// // 添加拖拽结束事件
			// document.addEventListener('dragend', this.handleMouseUp)
			// // 对选中的表头允许其拖拽
			// const dragclass = '.el-table__header-wrapper .' + column.id
			// const dragDom = document.querySelectorAll(dragclass)
			// dragDom.forEach((dom) => {
			// 	// 允许表头块可以被拖拽 draggable 属性 不允许拖拽dragover等相关拖拽事件无法触发
			// 	dom.setAttribute('draggable', true)
			// })
		},
		/** 鼠标在拖拽移动时触发 */
		handleDragover(e, column, $index) {
			// if (this.dragState.dragging) {
			// 	// 获取当前滚动条的位置
			// 	const scrollDom = this.$refs.elTable.bodyWrapper
			// 	this.scrollX = scrollDom.scrollLeft
			// 	const index = parseInt($index - 0) // 记录起始列
			// 	/** 实时更改鼠标处于表头的位置 */
			// 	if (index - this.dragState.start !== 0) {
			// 		this.dragState.direction =
			// 			index - this.dragState.start < 0 ? 'left' : 'right' // 判断拖动方向
			// 		this.dragState.end = parseInt($index - 0)
			// 	} else {
			// 		this.dragState.end = this.dragState.start
			// 		this.dragState.direction = null
			// 	}
			// }
		},
		/** 鼠标抬起或拖拽结束触发 */
		handleMouseUp() {
			// // 更新拖拽后的表头
			// this.headDraged(this.dragState)
			// const { end } = this.dragState
			// // 初始化拖动状态
			// this.dragState = {
			// 	start: end, // 记录最后拖动的位置
			// 	end: -9,
			// 	dragging: false,
			// 	direction: undefined
			// }
			// document.removeEventListener('mouseup', this.handleMouseUp)
			// document.removeEventListener('dragend', this.handleMouseUp)
			// setTimeout(() => {
			// 	// 重置拖拽状态
			// 	this.dragState.start = -9
			// }, 500)
		},
		// 更新拖拽后的表头
		headDraged({ start, end, direction }) {
			// if (direction) {
			// 	const originColumn = this.newCol[start]
			// 	// 有位置交换时，原先位置的元素删除，再在目标处插入
			// 	this.oldCol.splice(start, 1)
			// 	this.oldCol.splice(end, 0, originColumn)
			// 	this.headKey = new Date().getTime() + '' // 更新table key值
			// 	const uu_Id = this.$store.state.user.userInfo.id
			// 	const uidKey = uu_Id + '_commonTableKey_venueProfitAndLoss'
			// 	const getLocalTableData = Storage.get('commonTableKey')
			// 	if (getLocalTableData) {
			// 		Storage.set(
			// 			'commonTableKey',
			// 			Object.assign(getLocalTableData, {
			// 				[uidKey]: this.oldCol
			// 			})
			// 		)
			// 	} else {
			// 		Storage.set('commonTableKey', {
			// 			[uidKey]: this.oldCol
			// 		})
			// 	}
			// 	this.$nextTick(() => {
			// 		// 因为表头重绘后滚动条会移到最左端初始位置，因此如果是在中间部分拖拽，还需要把滚动条在定位到该位置
			// 		this.$refs.elTable.bodyWrapper.scrollLeft = this.scrollX
			// 	})
			// }
		},
		// 拖动虚线样式设置
		cellClassName({ columnIndex }) {
			const { start, end, direction } = this.dragState
			const target = columnIndex - 0
			if (target === start) {
				// 被移动的元素
				return 'drag_start'
			} else if (target === end) {
				// 要移动的位置
				return `drag_end_${direction}`
			}
			return ''
		},
		getVenueName(val) {
			// getVenueListWithoutPage
			this.venueNameList = []
			this.loading = true
			this.$api
				.getReportVenueNameList({
					venueType: val || undefined
				})
				.then((res) => {
					if (res.data && res.data.length > 0) {
						this.loading = false
						this.venueNameList = res.data
						for (const item of this.venueNameList) {
							this.queryData.venueCodes.push(item.gameCode)
						}
					}
					const sortOrder = [
						'德州扑克',
						'PM体育',
						'PM真人',
						'博雅棋牌',
						'PM电竞',
						'PM彩票'
					]
					this.customSortOrder = this.customSortOrder(
						this.venueNameList,
						sortOrder
					)
					this.loadVenueData()
				})
				.catch(() => {
					this.loading = false
				})
		},
		customSortOrder(data, sortOrder) {
			const sortedData = data.sort((a, b) => {
				const indexA = sortOrder.indexOf(a.venueName)
				const indexB = sortOrder.indexOf(b.venueName)
				return indexA - indexB
			})
			return sortedData
		},
		selectAllVenueMethod() {
			if (this.selectAllVenue) {
				this.queryData.venueCodes = []
				for (const item of this.venueNameList) {
					this.queryData.venueCodes.push(item.gameCode)
				}
			} else {
				this.queryData.venueCodes = []
			}
		},
		changeTableSort({ column, prop, order }) {
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadVenueData('searchName')
		},
		search() {
			this.pageNum = 1
			this.loadVenueData()
		},
		loadVenueData(searchName) {
			if (this.queryData.venueCodes.length === 0) {
				return this.$message.warning('请至少选择一个场馆')
			}
			this.tableTypeAjax = this.tableType

			if (this.tableType == '0') {
				if (!searchName) {
					this.newCol = []
					delete this.queryData.orderKey
					delete this.queryData.orderType
					this.$nextTick(() => {
						this.newCol = getColumnsNew()
					})
				}
			} else {
				this.newCol = getColumns()
			}

			if (+new Date() - 500 < this.axiosDate) return
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				startDate: Number(dayjs(timeArr[0]).format('YYYYMMDD')),
				endDate: Number(dayjs(timeArr[1]).format('YYYYMMDD')),
				...this.getParams()
			}
			this.elementToCheckList = params.venueCodes
			const min = dayjs(timeArr[0])
			const max = dayjs(timeArr[1])
			const day = dayjs(max).diff(min, 'day')
			if (day >= 31) {
				this.$message.warning(this.$t('report.31_day'))
				this.total = 0
				return
			}
			this.loading = true
			this.pageCurrency = this.merchantObj?.currency || ''
			// 删除venueCodes

			if (this.tableType == '1') {
				params.operateType = 0
				this.$api
					.getReportProxyVenueList(params)
					.then((res) => {
						this.loading = false
						this.axiosDate = +new Date()
						if (res.code === 200) {
							this.tableData = []
							this.tableData = res?.data?.record || []
							this.total = res?.data?.totalRecord || 0
							this.subSummary = res?.data?.summary || {}
						}
					})
					.catch(() => {
						this.loading = false
					})
				this.$api
					.getReportProxyVenueSummary(params)
					.then((res) => {
						this.loading = false
						if (res.code === 200) {
							this.totalSummary = res?.data || {}
						}
					})
					.catch(() => {
						this.loading = false
					})
			} else {
				delete params.venueCodes
				this.$api
					.getReportProxyVenueDayList(params)
					.then((res) => {
						this.loading = false
						this.axiosDate = +new Date()
						if (res.code === 200) {
							this.tableData = []
							this.tableData = res?.data?.record || []
							this.total = res?.data?.totalRecord || 0
							this.subSummary = res?.data?.summary || {}
						}
					})
					.catch(() => {
						this.loading = false
					})
				this.$api
					.getReportProxyVenueDaySummary(params)
					.then((res) => {
						this.loading = false
						if (res.code === 200) {
							this.totalSummary = res?.data || {}
						}
					})
					.catch(() => {
						this.loading = false
					})
			}
		},
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadVenueData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadVenueData()
		},
		dialogData(val) {
			const timeArr = this.searchTime || []
			this.pageNum = 1
			this.rowVal = {
				proxyId: val.proxyId,
				venueCode: val.venueCode,
				merchantId: val.merchantId,
				venueName: val.venueName,
				startDate: Number(dayjs(timeArr[0]).format('YYYYMMDD')),
				endDate: Number(dayjs(timeArr[1]).format('YYYYMMDD')),
				startDates: dayjs(timeArr[0]).format('YYYY/MM/DD'),
				endDates: dayjs(timeArr[1]).format('YYYY/MM/DD')
			}
			this.showDialog = true
		},
		getBetDetailData() {
			const timeArr = this.searchTime || []
			this.$api
				.getBetDetailMemberSummary({
					proxyId: this.curRow.proxyId,
					venueCode: this.curRow.venueCode,
					startDate: Number(dayjs(timeArr[0]).format('YYYYMMDD')),
					endDate: Number(dayjs(timeArr[1]).format('YYYYMMDD'))
				})
				.then((res) => {
					if (res.code === 200) {
						this.totalBetDetailSummary = res?.data || {}
					}
				})
				.catch(() => {})
			this.betDetaiInfolList = []
			this.rowVal.startDate = dayjs(timeArr[0]).format('YYYY/MM/DD')
			this.rowVal.endDate = dayjs(timeArr[1]).format('YYYY/MM/DD')
			this.$api
				.getVenueMemberId({
					proxyId: this.curRow.proxyId,
					startDate: Number(dayjs(timeArr[0]).format('YYYYMMDD')),
					endDate: Number(dayjs(timeArr[1]).format('YYYYMMDD'))
				})
				.then((res) => {
					if (res.code === 200) {
						this.rowVal = { ...this.rowVal, ...res.data }
						this.betDetaiInfolList.push(res.data)
					}
				})
			this.betDetailDialog = true
			this.$api
				.getDetailMemberList({
					venueCode: this.curRow.venueCode,
					proxyId: this.curRow.proxyId,
					startDate: Number(dayjs(timeArr[0]).format('YYYYMMDD')),
					endDate: Number(dayjs(timeArr[1]).format('YYYYMMDD')),
					pageNum: this.page,
					pageSize: this.size,
					...this.betDetailQueryData
				})
				.then((res) => {
					if (res.code === 200) {
						this.betDetailList = res.data.record || []
						this.totalRecord = res.data.totalRecord || 0
						this.betDetailSummary = res?.data?.summary || {}
					} else {
						this.$message({
							message: res?.msg || this.$t('common.error'),
							type: 'error'
						})
					}
				})
				.catch(() => {})
		},
		showBetDetailDialog(val) {
			this.curRow = val
			this.getBetDetailData()
		},
		changeBetDetailTableSort({ column, prop, order }) {
			this.betDetailQueryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.betDetailQueryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.betDetailQueryData.orderType = 'desc'
			} else {
				delete this.betDetailQueryData.orderKey
				delete this.betDetailQueryData.orderType
			}
			this.getBetDetailData()
		},
		handleCurrentChangeDialog(val) {
			this.page = val
			this.getBetDetailData()
		},
		handleSizeChangeDialog(val) {
			this.page = 1
			this.size = val
			this.getBetDetailData()
		},
		reset() {
			this.pageNum = 1
			this.merchantObj = ''
			this.tableType = '0'
			this.queryData.merchantId = ''
			this.queryData.venueCodes = []
			this.queryData.proxyName = undefined
			if (this.$refs.elTable) {
				this.$refs.elTable.clearSort()
			}
			for (const item of this.venueNameList) {
				this.queryData.venueCodes.push(item.gameCode)
			}
			this.searchTime = setSearchTime()
			this.loadVenueData()
		},
		handleExportExcel() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				startDate: Number(dayjs(timeArr[0]).format('YYYYMMDD')),
				endDate: Number(dayjs(timeArr[1]).format('YYYYMMDD'))
			}
			// const min = dayjs(timeArr[0])
			// const max = dayjs(timeArr[1])
			// const day = dayjs(max).diff(min, 'day')
			// if (day >= 31) {
			// 	this.$message.warning(this.$t('report.31_day'))
			// 	return
			// }
			if (this.tableType == '1') {
				params.operateType = 1
				this.exportBtnLoading = true
				this.exportExcelPublic({
					api: 'getReportProxyVenueExport',
					params
				}).finally(() => {
					this.exportBtnLoading = false
				})
			} else {
				this.exportBtnLoading = true
				this.exportExcelPublic({
					api: 'getReportProxyVenueDayExportNew',
					params
				}).finally(() => {
					this.exportBtnLoading = false
				})
			}
		},
		// 提交列设置数据
		subColList() {
			this.colSettings.visible = false
			const uu_Id = this.$store.state.user.userInfo.id
			const uidKey = uu_Id + '_commonTableKey_venueProfitAndLoss'
			const getLocalTableData = Storage.get('commonTableKey')
			if (getLocalTableData) {
				Storage.set(
					'commonTableKey',
					Object.assign(getLocalTableData, {
						[uidKey]: this.oldCol
					})
				)
				this.oldCol = getLocalTableData[uidKey]
			} else {
				Storage.set('commonTableKey', {
					[uidKey]: this.oldCol
				})
			}
		},
		// 打开列设置弹框
		openColSettings() {
			this.colSettings.visible = true
		},
		// 取消列设置
		cancleSetColumn() {
			this.colSettings.visible = false
			const getLocalTableData = Storage.get('commonTableKey')
			const uu_Id = this.$store.state.user.userInfo.id
			const uidKey = uu_Id + '_commonTableKey_venueProfitAndLoss'
			if (getLocalTableData && getLocalTableData[uidKey]) {
				this.oldCol = getLocalTableData[uidKey]
			} else {
				this.oldCol.map((item, index) => {
					item.isShow = true
				})
			}
		},
		// 复原缺省
		clickDel() {
			this.oldCol.map((item, index) => {
				item.isShow = true
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}

::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}

::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;

	> div {
		height: 100%;
	}
}

::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
::v-deep .is-group th:not(:first-child) {
	background-color: #f5f7fa !important;
}
::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}

.fenye {
	text-align: center;
}

::v-deep .is-group th {
	background-color: #f5f7fa !important;
}
</style>
